<template>
    <app-wrap class="map">
        <map v-if="isShowMap" :longitude="longitude" :latitude="latitude" :scale="scale" :markers="markers">
            <cover-view class="back-ctrl" @click="backHandle">
                返回
            </cover-view>
        </map>
    </app-wrap>
</template>

<script>
  import appWrap from '../components/app-wrap'
  import {getGeoCoder} from "../api";
  import iconPath from '../static/images/maker.png'

  export default {
    name: "map",
    components: {
      appWrap
    },
    data() {
      return {
        longitude: 0,
        latitude: 0,
        scale: 18,
        markers: []
      }
    },
    computed: {
      isShowMap() {
        return this.longitude && this.latitude;
      }
    },
    methods: {
      backHandle(){
        Megalo.navigateBack({
          delta: 1
        });
      }
    },
    created() {
      getGeoCoder(this.$mp.query.address)
        .then(({result}) => {
          console.log(result)
          this.longitude = result.location.lng;
          this.latitude = result.location.lat;
          this.markers.push({
            id: 0,
            longitude: this.longitude,
            latitude: this.latitude,
            // iconPath,
            width: 40,
            height: 52,
            callout: {
              content: this.$mp.query.address,
              display: 'ALWAYS',
              padding: '20rpx',
              borderRadius: '10rpx',
              color: '#000',
              bgColor: '#fff',
              textAlign: 'center',
              fontSize: '28rpx'
            }
          })
        })
    }
  }
</script>

<style scoped lang="less">
    map {
        width: 100vw;
        height: 100vh;
    }
    .back-ctrl{
        position: absolute;
        bottom: 40px;
        left: 50%;
        transform: translateX(-50%);
        background-color: #ff4444;
        color: #fff;
        padding: .8em 3em;
    }
</style>
